import Base from "./Base"
import mapboxgl from "mapbox-gl";



export default class MeasurePoint extends Base{

  constructor(map,{callBack:callBack=null,errorCallBack:errorCallBack=null}={}) {
    super(map,'MeasurePoint',{callBack:callBack,errorCallBack:errorCallBack});
  }


  start() {
    super.start();
    this.draw = new MapboxDraw({
      displayControlsDefault: false,
      controls: {}}
    );
    this.map.addControl(this.draw);
    this.draw.changeMode(this.draw.modes.DRAW_POINT);
    this.map.on('draw.create', (e)=>{
      this.update(e)
    });
  }

  update(e){
    this.clearPopup();
    console.log(e.features[0]);

    this.popup = new mapboxgl.Popup({
      closeButton: false,
      closeOnClick:false,
      className:this.popupClassName
    });
    this.popup.setLngLat(e.features[0].geometry.coordinates)
      .setHTML("经度:"+e.features[0].geometry.coordinates[0]+"<br/>纬度："+e.features[0].geometry.coordinates[1])
      .addTo(this.map);
  }

  /**
   * 移除长度文字
   */
  clearPopup(){
    if(this.popup){
      this.popup.remove();
      this.popup=null;
     super.clearPopup();
    }
  }
  close() {
    this.clear();
    this.clearEvent();
  }

  clear() {
    this.clearPopup();
    this.clearMap();
  }

  clearMap() {
    if(this.draw){
      this.draw.deleteAll();
    }
  }

  clearEvent() {
    super.clearEvent();
    this.map.off('draw.create');
    if(this.draw){
      this.map.removeControl(this.draw);
      this.draw=null;
    }
  }
}
